<template>
    <div class="HyperBoxHead">
        <div class="HyperBoxHead-1">
            <div class="HotListHead-top">
                <div class="HotListHead-top-1">
                    <div class="HotListHead-top-left">
                        <router-link to="/"><van-icon name="arrow-left"/></router-link>
                    </div>
                    <div class="HotListHead-top-title">超盒算</div>
                    <div class="HotListHead-top-right">
                        <van-icon name="share-o" />
                        <van-icon name="shopping-cart-o" badge="5" />
                    </div>
                </div>
            </div>
            <van-tabs animated background="#eb5656" color="#fff" title-active-color="#fff" title-inactive-color="#f6cdc8">
                <van-tab title="最快30分钟送达" >
                    <hyper-box-list></hyper-box-list>
                </van-tab>
                <van-tab title="云超限时抢">
                    <hyper-box-list></hyper-box-list>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import HyperBoxList from "./HyperBoxList";
export default {
    name: "HyperBoxHead",
    components: {HyperBoxList},
    methods: {

    },
}
</script>

<style scoped>
.van-tabs__nav{
    background-color: skyblue;
}

.HyperBoxHead-1{
    width: 100%;
    background-color: #eb5656;
    height: 1.07rem;
}
.HotListHead-top-title{
    font-size: .22rem;
    color: #fff;
}
.HotListHead-top{
    /*width: 100%;*/
    /*height: .40rem;*/
    /*position: fixed;*/
    /*top:0;*/
    /*z-index:520;*/
}
.HotListHead-top-1 i{
    color:#fff;
    font-size: .20rem;
}
.HotListHead-top-right i:nth-child(2){
    margin-left:.17rem;
}
.HotListHead-top-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .38rem;
    /*padding-left:.20rem;*/
    /*padding-right: .23rem;*/
    /*padding-top: .22rem;*/
    margin-bottom: .24rem;
    padding: .18rem .12rem 0 .20rem;
}
.van-tabs__nav{
    /*background-color: #eb5656;*/
}
</style>